<template>
    <div class="upload">
        <div class="upload-img-wrap">
            <el-upload :action="uploadUrl" :headers="headers" :data="fileData" :accept="accept" name="iFile" multiple list-type="picture-card"
                       :limit="limitCount" :file-list="imgArr" :on-exceed="handleExceed" :before-upload="handleBeforeUpload" :on-change="handleChange"
                       :class="{hide:hideUpload}" :on-remove="handleRemove" :on-success="handleSuccess" :on-preview="handlePictureCardPreview">
                <i slot="default" class="el-icon-plus"></i>
            </el-upload>
        </div>
        <template v-if="ImgVisible">
            <preview-image :ImgVisible="ImgVisible" @close="close" :imgSrc="previewImgSrc"></preview-image>
        </template>
    </div>
</template>
<script>
import hostUrl from "@/utils/baseUrl.js";
import { deleteFile } from "@/api/upload.js";
import previewImage from './previewImage.vue';
export default {
    components: { previewImage },
    name: "uploadSingleImg",
    props: {
        imgList: {
            type: Array,
            default: []
        },
        fileType: {
            type: String,
            default: "10",
        },
        accept: {
            type: String,
            default: ".png, .jpg, .jpeg, .gif",
        },
    },
    watch: {
        imgList: {
            immediate: true,
            handler(newV, oldV) {
                this.imgArr = newV;
                console.log('this.imgArr 信的', this.imgArr)
            }
        }
    },
    data() {
        return {
            imgArr: [],
            imgUrlList: [],
            fileList: [],
            limitCount: 10,
            dialogVisible: false,
            uploadUrl: hostUrl + "/uploadFile",
            headers: {
                Authorization: localStorage.getItem("Supply-Access-Token")
                    ? localStorage.getItem("Supply-Access-Token")
                    : "",
            },
            fileData: {
                type: 10,
            },
            ImgVisible: false,
            previewImgSrc: '',
            hideUpload: false
        };
    },
    created() { },
    methods: {
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 ${this.limitCount} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        handleBeforeUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.warning("图片大小不能超过 2MB!");
            }
            return isLt2M;
        },
        handleChange(file, fileList) {
            this.fileList = fileList;
            this.hideUpload = this.fileList.length >= this.limitCount;
        },
        handleSuccess(response, file, fileList) {
            if (response.code == 0) {
                file.url = response.file_url
            }
            this.formatImg(fileList)
        },
        handlePictureCardPreview(file) {
            this.ImgVisible = true;
            this.previewImgSrc = file.url
        },
        handleRemove(file, fileList) {
            this.formatImg(fileList)
            this.hideUpload = this.fileList.length >= this.limitCount;
        },
        //整理图片
        formatImg(arr) {
            const imgArr = arr.map(v => {
                return v.url
            })
            this.$emit("imageHandle", imgArr);
        },
        close() {
            this.ImgVisible = false;
        },
    },
};
</script>
<style scoped>
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 80px;
    height: 80px;
}
/deep/ .hide .el-upload--picture-card {
    display: none;
}
.upload-img-item {
    margin-right: 20px;
    margin-bottom: 15px;
}
</style>